<script lang="ts" setup>
import { defineProps, onMounted, reactive, ref } from "vue";
import { requestGetSoundSource, requestAlbumSongList } from "../../../utils/axiosURL"
import defaultImg from "../../../assets/logo.png";
import useSongURLStore from "../../../store/songURL";
const songURLStore = useSongURLStore()

const { name, picUrl, id, time, singerName } = defineProps(["name", "picUrl", "id", "time", "singerName"])
// 存储歌手专辑的歌单
const savaAlbumSongData = reactive<any>([])
// 专辑歌单长度
let albumSongSize = ref<number>(0)

onMounted(() => {
  requestAlbumSongListFn()
})

// 请求专辑歌单
const requestAlbumSongListFn = () => {
  requestAlbumSongList(id).then((data: any) => {
    savaAlbumSongData.values = data.songs.slice(0, 10)
    albumSongSize.value = data.songs.length
  }).catch(_ => { })
}

// 双击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
      {
        songName: name,
        songUrl: data[0].url,
        singer: singer,
        picUrl: picUrl,
        duration: duration,
        index,
        id
      }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}

// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",binding即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};
</script>

<template>
  <div class="AlbumLegendItem">
    <div class="leftImg">
      <RouterLink :to="{ path: `/AlbumDetail/${id}`, query: { url: picUrl, name, time, singerName } }">
        <img v-lazy="picUrl" alt="">
      </RouterLink>
      <div class="pseudo">
        <div class="pseudo_cir"></div>
      </div>
    </div>
    <div class="rightListWrap">
      <RouterLink :to="{ path: `/AlbumDetail/${id}`, query: { url: picUrl, name, time, singerName } }">
        <p class="listenMusicTop">{{ name }}</p>
      </RouterLink>
      <ul>
        <li v-for="(item, index) in savaAlbumSongData.values"
          @dblclick="clickSongPlay(item.id, item.name, item.ar[0].name, item.al.picUrl, item.dt, index)">
          <span class="index">{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</span>
              <span v-if="item.name !== songName" class="iconfont icon-xihuan"></span>
              <span v-else>
                <span v-if="playStates" class="iconfont icon-24gf-volumeZero"></span>
                <span v-else class="iconfont icon-24gf-volumeMiddle"></span>
              </span>
              <span class="iconfont icon-xiazai"></span>
              <span class="songName">{{ item.name }}</span>
              <button v-if=item.hr>Hi-Res</button>
              <RouterLink :to="`/MVDetail/${item.mv}`">
                <button class="mv" v-if=item.mv>MV</button>
              </RouterLink>
              <button v-if=item.sq>SQ</button>
              <p class="duration">
                <SongTime :songDuration=item.dt />
              </p>
        </li>
      </ul>
      <div class="viewMore" v-if="albumSongSize >= 10">
        <RouterLink :to="{ path: `/AlbumDetail/${id}`, query: { url: picUrl, name, time, singerName } }">
          <p>查看全部{{ albumSongSize }}首</p>
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.AlbumLegendItem {
  display: flex;
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
  margin-bottom: 50px;

  .leftImg {
    display: flex;
    width: 205px;
    height: 180px;

    img {
      flex-basis: 150px;
      width: 150px;
      height: 150px;
      border-radius: 6px;
    }

    .pseudo {
      position: relative;
      flex: 1;
      height: 150px;

      .pseudo_cir {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;

        &::after {
          z-index: -1;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: -170px;
          margin: auto;
          content: "";
          width: 150px;
          height: 150px;
          background: repeating-radial-gradient(#252525 6px,
              #000 10px);
          border-radius: 50%;
        }
      }

      &::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 0;
        width: 0;
        height: 30%;
        border-style: solid solid solid solid;
        border-width: 6px 0px 6px 6px;
        border-color: rgba(240, 240, 241, 0.28) transparent transparent rgba(240, 240, 241, 0.28);
        border-radius: 4px;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 6px;
        left: 0;
        width: 0;
        height: 30%;
        border-style: solid solid solid solid;
        border-width: 6px 0px 6px 6px;
        border-color: transparent transparent rgba(240, 240, 241, 0.28) rgba(240, 240, 241, 0.28);
        border-radius: 4px;
      }
    }
  }

  .rightListWrap {
    flex: 1;

    .listenMusicTop {
      font-size: $font-size-md;
      font-family: $activeTextFont;
    }

    ul {
      padding-right: 30px;
      box-sizing: border-box;

      li {
        padding-left: 30px;
        padding-right: 30px;
        line-height: 35px;
        box-sizing: border-box;
        border-radius: 6px;

        .index {
          margin-right: 10px;
          color: $font_second_color;
          font-size: $font-size-xs;
        }

        .mv {
          cursor: pointer;
        }

        .icon-xihuan,
        .icon-xiazai {
          margin-right: 10px;
          color: $font_second_color;
        }

        .icon-24gf-volumeZero,
        .icon-24gf-volumeMiddle {
          margin-left: 3px;
          color: $font_red_color;
          margin-right: 8px;
        }

        .songName {
          margin-left: 15px;
          font-size: $font-size-xs;
        }

        button {
          border: none;
          outline: none;
          height: 16px;
          line-height: 16px;
          padding: 0 2px;
          border: 1.5px solid $theme-red;
          background-color: #fff;
          color: $font_red_color;
          margin: 0 4px;
          font-family: $activeTextFont;
          font-size: $font-size-xs;
          border-radius: 3px;
          font-weight: bold;
        }

        .duration {
          float: right;
          margin-left: 15px;
          font-size: $font-size-xs;
          color: $font_second_color;
        }

        &:nth-child(odd) {
          background-color: rgb(250, 250, 250);
        }

        &:hover {
          background-color: rgb(241, 242, 243);
        }
      }
    }

    .viewMore {
      width: 100%;
      padding-right: 30px;
      box-sizing: border-box;

      p {
        padding-right: 30px;
        box-sizing: border-box;
        line-height: 30px;
        text-align: right;
        font-size: $font-size-xs;
        font-family: $activeTextFont;
        color: $font_second_color;
        background-color: rgb(250, 250, 250);
      }
    }
  }
}
</style>
